import  React from 'react';
import './vertical_4.css';

class  Vertical_4 extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const {datainfo}=this.props;
        return<div>
                { datainfo!=null&&datainfo.length>0?
                    <div  className=" timeline-vertical-4">
                    {
                        datainfo.map((item,i)=>{

                        let contentdata=item.content;
                        let contentArr=contentdata.split(/\n/g);
                        let count=0;
                        i%2==1?count=1:'';
                            return <div className={'timeline-datainfo num_'+i}>
                                        <div className="timeline-img ">
                                        </div>
                                        <div className={"timeline-content  count_"+count}>
                                            <div style={{height:'20px'}}>
                                            <div className="timeline-content-right"></div>
                                            <div className={"timeline-content-info-date wea-f12"} title={item.timeline}>
                                                {item.timeline}
                                            </div>
                                            </div>
                                            <div className="timeline-content-info-title">
                                                {
                                                    contentArr.map((item,i)=>{
                                                        if(item==""){
                                                            return <div style={{display:'block',height:'20px'}}></div>
                                                        }
                                                        return <div className={"wea-f12"} style={{display:'block'}}>{item}</div>
                                                    })
                                                }
                                            </div>
                                        </div>
                                    </div>
                        })
                    }
                </div>
                :
                <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                }
                </div>
    }
}

export default Vertical_4;